云胡的 blog

# JavaScript 变量作用域

# 一、var 的作用域

# 1.1 var 变量在函数体外使用

变量在函数体内声明，作用域范围是在函数体内。

'use strict';

function foo() {
	var x = 1;
	x = x + 1;
}

x = x + 2; // ReferenceError! 无法在函数体外引用变量x
1
2
3
4
5
6
7
8

# 1.2 不同函数同名变量

'use strict';

function foo() {
	var x = 1;
	x = x + 1;
}

function bar() {
	var x = 'A';
	x = x + 'B';
}
1
2
3
4
5
6
7
8
9
10
11

不同函数内的同一个变量是可以的，互相独立，互不影响。

# 1.3 外部函数变量与内部函数变量重名

function foo() {
    var x = 1;
    function bar() {
        var x = 'A';
        console.log('x in bar() = ' + x); // 'A'
    }
    console.log('x in foo() = ' + x); // 1
    bar();
}

foo(); // x in foo() = 1  x in bar() = A
1
2
3
4
5
6
7
8
9
10
11

内部函数变量会屏蔽掉外部函数变量的值。

# 二、变量提升

'use strict';

function foo() {
    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';
}

foo(); // Hello, undefined
1
2
3
4
5
6
7
8
9

JavaScript 会扫描整个函数体，然后将所有声明的变量提升到函数的顶部，此时 y 被声明因此不会报错，但是 y 没有被赋值，因此值是 undefined。

# 三、全局作用域

JavaScript 默认有一个全局对象 window，全局作用域的变量实际上被绑定到 window 的一个属性。

'use strict';

var course = 'Learn JavaScript';
console.log("1: " + course);
console.log("2: " + window.course)
console.log("3: " + (course === window.course))
1
2
3
4
5
6

output:

1: Learn JavaScript
2: Learn JavaScript
3: true
1
2
3

以变量方式 var foo = function () {} 定义的函数实际上也是一个全局变量。

'use strict';

function foo() {
    alert('foo test');
}

foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用
1
2
3
4
5
6
7
8

弹出两次 foo test。

这说明 JavaScript 实际上只有一个全局作用域。

任何变量，包括函数，如果没有在当前的作用域上找到，那么会向上继续寻找，直到全局作用域，如果全局作用域之中也没有，则会报出ReferenceError 错误。

# 四、局部作用域

# 4.1 var 定义的局部作用域

'use strict';

function foo() {
    for (var i = 0; i < 100; i++) {
        //
    }
    i += 100; // 仍然可以引用变量i
		console.log("i = " + i);
}

foo(); // i = 200
1
2
3
4
5
6
7
8
9
10
11

var声明的变量 i的作用域不是在 for 循环之中，而是在 foo() 之中，因此依然可以引用到。

# 4.2 let 定义的块级作用域

使用 let 可以拥有块级的作用域。

'use strict';

function foo() {
    for (let i = 0; i < 100; i++) {}
    i += 100; // 不可以引用变量i
    console.log(i)
}
foo();
1
2
3
4
5
6
7
8

报错，let 声明的 i，只能在 for 循环里面使用。

ES6 还引入了 const 来表示常量，也是块级作用域。

← JavaScript 操作 DOM →